<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <!--<h:outputScript library="js" name="calendar_es.js" />-->
        <title>Crear nueva lista</title>
    </h:head>
    <h:body>
        <h:form id="createListForm">
            <p:growl id="createListGrowl" showDetail="true" showSummary="true" autoUpdate="true" />
            <p:wizard flowListener="#{productsListsBean.onFlowProcess}">
                <p:tab id="products" title="Productos" >
                    <p:panel header="Agregar Productos">
                        <p:messages />
                        <h:panelGrid columns="3" cellpadding="4" styleClass="wizardForm">
                            <p:outputLabel value="Ingresar nombre del producto" for="acproducto" />
                            <p:autoComplete id="acproducto" value="#{productsListsBean.acProducto}" size="80"
                                            completeMethod="#{productsListsBean.completarProducto}" />
                            <p:commandButton value="Agregar" icon="ui-icon-check" update="output" 
                                             actionListener="#{productsListsBean.agregarProducto}" />
                        </h:panelGrid>
                        <div class="listaProductosSel">
                            <p:dataList id="output" value="#{productsListsBean.selectedProductsList}" var="prd"
                                        emptyMessage="No se seleccionaron productos">
                                #{prd.product}
                            </p:dataList>
                        </div>

                    </p:panel>
                </p:tab>
                <p:tab id="info" title="Información">
                    <p:panel header="Información de la Lista">
                        <p:messages />
                        <h:panelGrid columns="2" cellpadding="4" styleClass="wizardForm">
                            <p:outputLabel value="Nombre de la Lista" for="listname" />
                            <p:inputText id="listname" value="#{productsListsBean.nombreLista}" size="80" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>
                <p:tab id="confirmation" title="Confirmación">
                    <p:panel header="Confirmación">
                        <p:messages />
                        <h:panelGrid columns="2" cellpadding="4" styleClass="wizardForm">
                            <p:outputLabel value="Lista de Productos: " />
                            <p:dataList value="#{productsListsBean.selectedProductsList}" var="prd" styleClass="wizardList">
                                #{prd}
                            </p:dataList>
                            <p:outputLabel value="Nombre de la Lista: " />
                            <p:outputLabel value="#{productsListsBean.nombreLista}" />
                        </h:panelGrid>
                        <p:commandButton value="Crear Lista" actionListener="#{productsListsBean.save}"
                                         process="@this"/>
                    </p:panel>
                </p:tab>
            </p:wizard>
        </h:form>
    </h:body>
</html>